import styled from "styled-components";

export const HeaderWapper = styled.div`
  &.fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 99;
  }
  .content {
    position: relative;
    z-index: 19;
    transition: all 200ms ease-in-out;
    background-color: ${(props) => (props.theme.isAlpha ? "rgba(255,255,255,0)" : "rgba(255,255,255,1)")};
    border-bottom: 1px solid #eee;
    border-bottom-color: ${(props) => (props.theme.isAlpha ? "rgba(233,233,233,0)" : "rgba(233,233,233,1)")};
    .top {
      display: flex;
      align-items: center;
      height: 80px;
      .left {
        flex: 1;
        display: flex;
        margin-left: 24px;
        color: ${(props) => (props.theme.isAlpha ? "#fff" : props.theme.color.primary)};
      }
    }
  }
  .search-area {
    height: 100px;
  }
  .cover {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.4);
  }
`;

export const SearchAreaWrapper = styled.div`
  transition: height 250ms ease;
  height: ${(props) => (props.isSearch ? "100px" : "0")};
`;
